@charset "utf-8";

$fontsize:40;

@function r($px){
    @return $px/$fontsize * 1rem;
}

//共用
@mixin ckw{
        
            width: 100%;
            .item{
                width: r(705);
                height: r(176);
                margin: 0 auto;
                margin-top: r(10);
                .item_img{
                   width: r(176);
                   height: r(176);
                   
                  border: 1px solid red;
                   img{
                       width: 100%;
                       height: 100%;
                   }
                }
                .item_right{
                    width: r(505);
                    height: 100%;
                    float: right;
                    .item_btn{
                        float: right;
                        width: r(112);
                        height: r(58);
                        background: #FF9344;
                        border-radius: 25px;
                        margin-top: r(67);
                        button{
                            background: transparent;
                            text-align: center;
                            margin: 0 auto;
                            display: block;
                            line-height: r(58);
                            color: white;
                        }
                    }
                    .item_msg{
                        h5{
                            font-size: r(27);
                        }
                        .item_score{
                           display: inline-block;
                           width: r(260);
                           white-space: nowrap;
                           font-size: 0;
                            .starBox img{
                                width: r(35);
                                height: r(34);
                                margin-right: r(5);
                            }
                            .starBox span{
                                color: #929292;
                                font-size: r(24);
                            }
                        }
                        p{
                            font-size: r(23);
                            color: #929292;
                        }
                        a{
                            font-size: r(19);
                            color: #FF9344;
                        }
                    }
                }
                
            }
        
    }

//html{font-size:$fontsize;}
html,body{
    width: 100%;
    height: 100%;
}
.web{
    width: 100%;
    height: 100%;
    position: relative;
    //头部
    header{
        width: 100%;
        height: r(131);
        position: absolute;
        top: 0;
        .header_left{
            width: r(125);
            height: r(57);
            border: 1px solid #FF9344;
            margin-top: r(48);
            margin-left: r(21);
            text-align: center;
            border-radius: 25px;
            line-height: r(57);
            font-size: r(20);
            float: left;
            vertical-align: middle;
            display: inline-block;
        }
        .header_middle{
            display:block;
            text-align: center;
            margin-top: r(64);
            font-size: r(25);
        }
        .header_right{
            display: inline-block;
            float: right;
            vertical-align: middle;
            img{
                width: r(50);
                height: r(50);
                margin-top: r(53);
                margin-right: r(22);
            }
        }
    }
    //主体
    
    section{
        width: 100%;
        position: absolute;
        top: r(131);
        bottom: r(68);
        overflow-y: scroll;
        .lb{
            width: r(705);
            height: r(259);
            margin: 0 auto;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .section_zt1{
            width: r(705);
            height: r(120);
            margin: 0 auto;
            vertical-align: middle;
            display: block;
            .zt_left{
                color: #FF9344;
                float: left;
                font-size: r(59);
                line-height: r(120);
            }
            .zt_right{
                float: right;
                width: r(111);
                height: r(59);
                background: #FF9344;
                border-radius: 25px;
                text-align: center;
                margin-top: r(37);
                margin-right: r(21);
                font-size: r(29);
                color: white;
                line-height: r(59);
            }
        
        }
        .section_zt2{
            width: r(705);
            height: r(96);
            margin: 0 auto;
            vertical-align: middle;
            display: block;
            .zt_left2{
                line-height: r(96);
                display: inline-block;
                .aa{
                    width: r(37);
                    height: r(35);
                    float: left;
                    img{
                        width: 100%;
                        height: 100%;
                    }
                }
                span{
                    margin-left: r(17);
                    font-size: r(30);
                    i{
                        color: #FF9344;
                    }
                }
            }
            .zt_right2{
                line-height: r(96);
                float: right;
                font-size: r(27);
                color: #8e8e8e;
            }
        
        }
        .section_zt3{
            width: r(705);
            height: r(67);
            margin: 0 auto;
            background: #FF9344;
            .zt_left3{
                color: white;
                float: left;
                font-size: r(27);
                line-height: r(67);
            }
            .zt_right3{
                float: right;
                color: white;
            }
        
        }
        .itemBox{
           @include ckw;
        }
        .itemBox2{
           @include ckw;
        }
        .itemBox3{
            @include ckw;
        }
    }
    footer{
        width: 100%;
        height: r(68);
        background: white;
        position: absolute;
        bottom: 0;
        a{
            color: #000000;
        }
        
        ul li{
            width: 25%;
            height: 100%;
            float: left;
            text-align: center;
            padding-top: 8px;
            box-sizing: border-box;
            i{
                color: #FF9344;
            }
            .iconfont{
                color: #FF9344;
                font-size: r(65);
                -webkit-text-stroke: 1px #FF9344;
                color: transparent;
                
            }
            &.active .iconfont{
                color: #FF9344;
            }
            p{
                font-size: r(26);
            }
            &:hover .iconfont{
                color: red;  
            }
        }
    }
}